{#include main fluid=true}
{#title}Dev Services{/title}
{#body}

{#if info:devServices}
    <div class="row row-cols-1 row-cols-md-2">
        {#for service in info:devServices}
        <div class="col mb-4">
          <div class="card h-100">
            <div class="card-header">
                {service.name}
              </div>
              <div class="card-body">
                    {#if service.containerInfo}
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <i class="fas fa-box-open" data-toggle="tooltip" data-placement="top" title="Container"></i> {service.containerInfo.getShortId()} {service.containerInfo.formatNames()}
                        </li>
                        <li class="list-group-item">
                            <i class="fab fa-docker" data-toggle="tooltip" data-placement="top" title="Image"></i> {service.containerInfo.imageName}
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-network-wired" data-toggle="tooltip" data-placement="top" title="Networks"></i> {service.containerInfo.formatNetworks()}
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-project-diagram" data-toggle="tooltip" data-placement="top" title="Exposed Ports"></i> {service.containerInfo.formatPorts()}
                        </li>
                    </ul>
                    <hr/>
                    {/if}
                    <h5 class="card-title">Config</h5>
                    <code class="h-100">
                    {#for config in service.configs}
                        {config.key}={config.value}
                        <br/>
                    {/for}
                    </code>
              </div>
              <div class="card-footer border-0 bg-white">
                  <a href='{devRootAppend}/io.quarkus.quarkus-vertx-http/config?filterByExtension="{service.name}"&filterConfigKeys={service.configs.keys}' class='float-right text-secondary' title='Config Editor'><i class='fas fa-edit'></i></a>
              </div>
          </div>
        </div>
        {/for}
    </div>    
    {#else}
    <div class="card text-center">
        <div class="card-body">
            <p class="card-text">You do not have any Dev Services running</p>
            <a href="https://quarkus.io/guides/dev-services" target="_blank" class="card-link">Read more about Dev Services</a>
        </div>
    </div>
    
    {/if}

{/body}
{/include}
